<!-- Dom模板 -->
<template>
  <div class="backpasword">
    <!-- Dom内容 -->
    <div class="tops">
      <p @click="fanhui" class="icon iconfont icon-zuojiantou-01"></p>
      <p>{{ $route.query.type === "02" ? "找回密码" : "手机号注册" }}</p>
      <p></p>
      <p></p>
    </div>
    <div class="fromgoup">
      <van-field
        v-model="code"
        center
        clearable
        maxlength="6"
        @input="codeChange"
        placeholder="请输入验证码"
      >
        <template #button>
          <van-button ref="getCode" @click="getCode" size="small" type="primary"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="tel"
        type="tel"
        clearable
        maxlength="20"
        :error-message="forgotPhoneerr"
        @input="paswordChange"
        :placeholder="
          $route.query.type === '02'
            ? '请输入新密码 (6-20位英文或数字)'
            : '请设置新密码 (6-20位英文或数字)'
        "
      />
      <van-button :disabled="disabled" type="primary" block @click="submit_1"
        >提交</van-button
      >
    </div>
    <van-notify v-model="show" type="success" class="notify">
      <!-- <van-icon name="bell" style="margin-right: 4px;" /> -->
      <span
        >【人人购物】您好，您正在进行找回密码操作，切勿将验证码泄露于他人，10分钟内有效。验证码：{{
          getcode
        }}</span
      >
      <div class="sazy">
        <div @click="confirm">已读</div>
        <div @click="confirm('01')">复制验证码</div>
      </div>
    </van-notify>
  </div>
</template>
<script>
// import a from './a'; // 引入组件]
import { gitCode, validation } from "../../encapsulation";
import * as API from "../../api/login";
export default {
  // name: "FROM",
  data() {
    return {
      msg: "测试",
      // 输入的验证码
      code: "",
      // 获取到的验证码
      getcode: "",
      // 密码
      tel: "",
      // 密码的错误提示信息
      forgotPhoneerr: "",
      //验证码的错误提示信息
      Verification: "",
      // 控制登录按钮状态的
      disabled: true,
      // 控制消息开关
      show: false
    };
  },
  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$route.query.type);
  },
  // Vue方法定义
  methods: {
    // 点击消息弹框里的确认
    confirm(type) {
      if (type == "01") {
        this.code = this.getcode;
        this.show = false;
      } else {
        this.show = false;
      }
    },
    fanhui() {
      this.$toast.loading({
        message: "加载中...",
        loadingType: "spinner",
        forbidClick: true,
        duration: 500,
        onClose: () => {
          this.$router.push({
            path: "/login"
          });
        }
      });
    },
    // 验证码监听
    codeChange() {
      // 如果密码格式正确 并且验证码输入框有值就可以提交啦
      let ispasword = validation.ispasword(this.tel);
      if (this.code.length == 6 && ispasword) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    // 监听密码输入
    paswordChange() {
      let ispasword = validation.ispasword(this.tel);
      // 判断输入的密码格式是否正确
      if (!ispasword) {
        // 如果不正确提示
        this.forgotPhoneerr = "请输入6~20位英文或数字";
        // 禁用按钮
        this.disabled = true;
      } else {
        // 如果正确清除错误提示信息
        this.forgotPhoneerr = "";
        if (this.code) {
          // 如果正确并且验证码格式也对打开按钮
          this.disabled = false;
        }
      }
      // 如果密码框为空清除错误提示信息 并禁用按钮
      if (!this.tel) {
        this.forgotPhoneerr = "";
        this.disabled = true;
      }
    },
    // 点击提交
    async submit_1() {
      // 首先判断输入的验证码和获取到的验证码一致不一致
      if (this.getcode !== this.code) {
        // 微提示 验证码错误
        this.$toast({
          message: `验证码错误`,
          position: "top",
          duration: 3000
        });
      }
      //再判断是找回密码还是注册账号
      if (this.$route.query.type === "02") {
        let _this2 = this;
        // 发送忘记密码请求
        this.$toast.loading({
          message: "加载中...",
          loadingType: "spinner",
          forbidClick: true,
          duration: 500,
          onClose: async () => {
            let res = await API.login({
              phone: this.$route.query.phone,
              password: this.tel,
              // type：02_2 代表点击的是忘记密码的提交
              type: "02_2"
            });
            // 修改密码成功提示
            this.$toast.success(res.msg);
          }
        });
      } else {
        // 发送注册账号请求
        this.$toast.loading({
          message: "加载中...",
          loadingType: "spinner",
          forbidClick: true,
          duration: 500,
          onClose: async () => {
            let res = await API.login({
              phone: this.$route.query.phone,
              password: this.tel,
              // type：03 代表点击的是注册账号的提交
              type: "03_1"
            });
            console.log(res);
            this.$router.push({
              path: "/login"
            });
            this.$toast.success(res.msg);
          }
        });
      }
    },

    // 点击获取验证码
    getCode() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 500,
        onClose: async () => {
          await gitCode(this.$refs.getCode, 3, code => {
            console.log(code);
            this.getcode = code;
            // 信息提示验证码
            this.show = true;
            setTimeout(() => {
              // this.show = false;
            }, 6000);
          });
        }
      });
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../fonts/iconfont.css");
.backpasword {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding-top: 50px;
  z-index: 1;
}
.tops {
  width: 100%;
  height: 50px;
  background: #fff;
  box-shadow: -1px 2px 5px -5px #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
}
.tops > :nth-child(2) {
  margin-left: 20px;
}
.icon {
  font-weight: bold;
  font-size: 23px;
  margin: 0 20px;
}
.fromgoup {
  width: 80%;
  height: auto;
  margin: 40px auto;
}
.fromgoup .van-field {
  margin-bottom: 40px;
  border: 0.5px solid #ccc;
  border-radius: 5px;
}
.yes {
  width: 95%;
  margin: 10px auto;
}
.yes p {
  margin: 10px;
}
.yes p span {
  margin: 10px;
}
.agreement {
  width: 41%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.userYes {
  margin-left: 10px;
}
.userYes:hover {
  color: blue;
}
.logins {
  color: #33cc99;
  width: 45px;
}
.notify {
  top: 2%;
  left: 5.5%;
  width: 90%;
  height: 20%;
  border-radius: 10px;
  background: rgb(0, 0, 0);
  box-shadow: 1px 6px 20px -10px #000;
  /* position: relative; */
}
.notify span:nth-child(1) {
  position: absolute;
  width: 90%;
  top: 18px;
}

.sazy {
  width: 100%;
  height: 40px;
  border-top: 1px solid #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sazy > div {
  width: 50%;
  height: 100%;
  line-height: 40px;
  color: rgb(4, 170, 4);
}
.sazy > div:nth-child(1) {
  border-right: 1px solid #fff;
}
</style>
